import React, { useEffect, useState } from 'react';
import SearchInput from '@/components/SearchInput';
import ListColums from './list';
import {deepClone} from '@/utils/utils';
import "./index.less"

import { MyContext } from '@/context/index';
const { Provider, Consumer } = MyContext

const ModalList = ({ List, submitBtn }) => {
    return (
        <div className="m-b-content">
            {
                List?.length > 0 && List.map(el =>
                    <ListColums item={el} key={el.no} submitBtn={submitBtn}></ListColums>
                )
            }
        </div>
    )
}

function DeviceModal (props) {
    const [List, setList] = useState([]);
    const [oldList,setOldList] = useState([])

    useEffect(() => {
        setList(props.basicColumns2[0])
        setOldList(deepClone(props.basicColumns2[0] || [])) 
    }, [props.basicColumns2]);


    const getHandlePressVal = (val) => {
        if (!val) {
            setList(oldList)
            return
        }

        let a = List.filter( el=> el.fixedAssetsName.indexOf(val) > -1)
        setList(a)
    }

    const submitBtn = (item) => {
        props.submit(item)
    }

    return (
        <div className='modal-wrapper'>
            <div className="m-tit">
                <span onClick={() => props.close()}>取消</span>
                <span onClick={submitBtn}>确定</span>
            </div>
            <div className="m-body">
                <Provider value={{ placeholderTxt: "请输入设备名称" }}>
                    <SearchInput getHandlePressVal={getHandlePressVal} hideScan={true} searchIcon={ true}/>
                    <ModalList List={List} submitBtn={submitBtn}></ModalList>
                </Provider>
            </div>
        </div>
    );
}

export default DeviceModal;
